<template class="public">
  <div>
    <!-- 导航栏 -->
    <van-nav-bar :title="$route.name" class="public" />
    <!-- 标签栏 -->
    <van-grid class="public" >
      <van-icon name="location-o" class="xiaou" color="white"/>
      <img src="../assets/images/images/logo.jpg" alt="" style="height: 2.48rem;">
      <input type="text" class="iconfont" placeholder="按内容搜索" >
      <van-icon name="shop-o" color="white" class="xiaou"/>
    </van-grid>

    <van-tabs 
    
    background= "#ff6141" 
    color="white" title-inactive-color="white"
    title-active-color="white">
      <van-tab title="手机通讯"></van-tab>
      <van-tab title="生活家电"></van-tab>
      <van-tab title="家居"></van-tab>
      <van-tab title="服装"></van-tab>
      <van-tab title="男"></van-tab>
      <van-tab title="分类"></van-tab>
      
    </van-tabs>
    <!-- 轮播图 -->
    <van-swipe :autoplay="1000">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img class="imgUrl" :src="item.img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航展示 
    van-grid
    gutter	格子之间的间距，默认单位为px 默认是0
    border	是否显示边框	boolean	true
    column-num	列数 默认是4
    -->
    <van-grid :column-num="5" :border="false">
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/seckill.png')" />
        <p class="navtitle">限时秒杀</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/top.png')" />
        <p class="navtitle">畅销商品</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/brand.png')" />
        <p class="navtitle">品质大牌</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/selfsupport.png')" />
        <p class="navtitle">小U自营</p>
      </van-grid-item>
      <van-grid-item>
        <van-image :src="require('../assets/images/icon/integral.png')" />
        <p class="navtitle">积分商城</p>
      </van-grid-item>
    </van-grid>
    <!-- 首页商品切换 -->
    <van-tabs type="card">
      <van-tab title="热门推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in hotList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in newList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodsList"
          :key="item.id"
          num="1"
          :price="item.price | toPrice"
          desc="描述信息"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
//引入封装好的接口
import { getBanner, homeGoods } from "../request/api";
export default {
  data() {
    return {
      bannerList: [],
      newList: [],
      hotList: [],
      goodList: [],
    };
  },
  mounted() {
    //组件一加载就调用轮播图接口
    getBanner().then((res) => {
      //   console.log(res,'响应');
      if (res.code == 200) {
        this.bannerList = res.list;
      }
    });
    homeGoods().then((res) => {
      console.log(res, "首页商品列表");
      if (res.code == 200) {
        this.hotList = res.list[0].content;
        this.newList = res.list[1].content;
        this.goodsList = res.list[2].content;
      }
    });
  },
  methods: {
    goDetail(id) {
      //   this.$router.push("/detail?id='+id");
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style scoped>
.imgUrl {
  width: 100%;
  height: 250px;
}
.navtitle {
  font-size: 14px;
}
.public /deep/ .van-ellipsis {
  color: white !important;
}
.public {
  background: #ff6141;
}
.xiaou{
   line-height: 2.48rem;
   font-size: 1.1rem;
}
</style>
